<template>
  <view class="gift-page">
    <!-- 礼物列表 -->
    <scroll-view class="gift-list" scroll-y>
      <view 
        class="gift-item" 
        v-for="gift in giftList" 
        :key="gift.id"
        @click="navigateToGiftDetail(gift.id)"
      >
        <view class="gift-image">
          <image :src="gift.imageUrl" mode="aspectFill"></image>
        </view>
        <view class="gift-info">
          <view class="gift-header">
            <text class="gift-name">{{ gift.name }}</text>
            <text class="gift-point">{{ gift.point }}积分</text>
          </view>
          <text class="gift-description">{{ gift.description }}</text>
          <view class="gift-footer">
            <text class="gift-stock">剩余: {{ gift.currentCount }}件</text>
            <button 
              class="exchange-btn" 
              :disabled="gift.count <= 0"
              @click.stop="handleExchange(gift)"
            >
              {{ gift.count > 0 ? '立即兑换' : '已兑完' }}
            </button>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-tip" v-if="giftList.length === 0">
        <text>暂无礼物可兑换</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { giftPageApi, exchangeGiftApi } from '../../http/gift.js';
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';

// 分页参数
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const addressId = 299274242;

// 礼物列表数据
const giftList = ref([]);

// 获取礼物列表
const fetchGiftList = async () => {
  try {
    const res = await giftPageApi(pageNum.value, pageSize.value);
    giftList.value = res.records;
    total.value = res.total;
  } catch (error) {
    console.error('获取礼物列表失败:', error);
    uni.showToast({
      title: '获取礼物列表失败',
      icon: 'none'
    });
  }
};

// 兑换礼物
const handleExchange = (gift) => {
  uni.showModal({
    title: '确认兑换',
    content: `确定要兑换【${gift.name}】吗？将消耗${gift.point}积分`,
    success: (res) => {
      if (res.confirm) {
        // 调用兑换API
        exchangeGift(gift.id, addressId);
      }
    }
  });
};

// 兑换API调用
const exchangeGift = async (giftId, addressId) => {
  try {
    // 这里替换为实际的兑换API调用
    await exchangeGiftApi(giftId, addressId);
    uni.showToast({
      title: '兑换成功',
      icon: 'success'
    });
    // 刷新列表
    fetchGiftList();
  } catch (error) {
    uni.showToast({
      title: '兑换失败',
      icon: 'none'
    });
  }
};

// 跳转到礼物详情
const navigateToGiftDetail = (giftId) => {
  uni.navigateTo({
    url: `/pages/gift/detail?id=${giftId}`
  });
};

// 页面显示时加载数据
onShow(() => {
  fetchGiftList();
});

// 下拉刷新
const onRefresh = () => {
  pageNum.value = 1;
  fetchGiftList();
};

// 加载更多
const loadMore = () => {
  if (giftList.value.length >= total.value) return;
  pageNum.value += 1;
  fetchGiftList();
};
</script>

<style scoped>
.gift-page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.gift-list {
  height: calc(100vh - 40rpx);
}

.gift-item {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.gift-image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
  border-radius: 12rpx;
  overflow: hidden;
}

.gift-image image {
  width: 100%;
  height: 100%;
}

.gift-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gift-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.gift-name {
  font-size: 32rpx;
  font-weight: bold;
}

.gift-point {
  font-size: 28rpx;
  color: #ff6b6b;
  font-weight: bold;
}

.gift-description {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.gift-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gift-stock {
  font-size: 24rpx;
  color: #999;
}

.exchange-btn {
  border: none;
  border-radius: 40rpx;
  padding: 8rpx 30rpx;
  font-size: 26rpx;
  background-color: #4facfe;
  color: white;
}

.exchange-btn[disabled] {
  background-color: #ccc;
  color: #999;
}

.empty-tip {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>